/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<!-- #ifndef MP -->
		<view class="container" > 
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view class="head-user" :style="{height:navHeight+'px',background:bg}">
			<view class="text">用户中心</view>
		</view>
		<view class="container" :style="{marginTop:navHeight+'px'}"> 
		<!-- #endif -->
			<app-head :bg="bg"></app-head>
			<view class="head_re">
				<view class="top_1">
					<image class="bg_1" :src="bgImg" role="img"></image>
					<view class="r">
						<navigator @tap.stop="clickMenu" v-if="!notDo" class="l_1" data-type='login' data-url="/pages/user/message_notice/message_notice" 
						 role="navigation">
							<image :src="imgUrl+'user/s_2.png'" role="img"> </image>
							<view class="nuberi_1" v-if="newCount.count>0">{{newCount.count}}</view>
						</navigator> 
							<navigator @tap.stop="clickMenu" data-type='login' class="l_1"
							 data-url="/pages/user/userinfo/userinfo"  role="navigation">
								<image :src="imgUrl+'user/s_1.png'" role="img"></image>
						</navigator>
					</view>
				</view>
				<view class="top_2 top_3">
					<view class="t_top_1">
						<view class="l_1 clearfix">
							<!-- 仅仅小程序 -->
							<!--#ifdef MP-->
							<view  class="tx" data-url="/pages/user/get_user_info/get_user_info">
								<view class="b" >
									<image v-if="hasLogin"  mode="aspectFill" @tap.stop="clickMenu" data-url="/pages/user/userinfo/userinfo" :src="imageError?defaultImg:userInfo.head_pic?userInfo.head_pic:defaultImg" @error="onImageError()"role="img"></image>
									<image v-else :src="defaultImg" @tap.stop="clickMenu" data-url="/pages/user/get_user_info/get_user_info" mode="aspectFill"></image>
								</view>
							</view>
							<view  class="tx_yan des_flex_2" >
								<view v-if="hasLogin">
									<view class="bt over_hide">{{userInfo.nickname}}</view>
									<view class="b_j">注册会员</view>
								</view>
								<view v-else>
									<view @tap.stop="clickMenu" data-type='login' data-url="/pages/user/get_user_info/get_user_info" class="bt over_hide">请登录</view>
									
								</view>
							</view>
							<!-- #endif -->
							<!-- 仅仅h5和app -->
							<!-- #ifdef H5 ||APP-PLUS -->
							<view  class="tx" >
								<view class="b">
									<image v-if="hasLogin" mode="aspectFill"@tap.stop="clickMenu" data-url="/pages/user/userinfo/userinfo"  :src="imageError?defaultImg:userInfo.head_pic?userInfo.head_pic:defaultImg" @error="onImageError()" role="img"></image>
									<image v-else  :src="defaultImg" data-type='login' @tap.stop="clickMenu"  data-url="/pages/user/login/login" mode="aspectFill"></image>
								</view>
							</view>
							<view  class="tx_yan des_flex_2">
								<view v-if="hasLogin">
									<view class="bt over_hide">{{userInfo.nickname}}</view>
									<view class="b_j">注册会员</view>
								</view>
								<view v-else>
									<view @tap.stop="clickMenu" data-type='login' data-url="/pages/user/login/login" class="bt over_hide">请登录</view>
	
								</view>
							</view>
							<!-- #endif -->
							
							<view class="sign_in_1 des_flex_2">
								<navigator @tap.stop="clickMenu" class="sign_in" data-type="login" data-url="/pages/user/sign_in/sign_in" role="navigation">
									<image :src="imgUrl+'user/jf_1.png'" role="img"></image>
									签到赚积分
								</navigator>
							</view>
						</view>
					</view>
				</view>
				<view class="top_2" >
					<view class="t_top_1">
						<view class="l_2 des_flex_4">
							<view @tap.stop='clickMenu' data-url="/pages/user/account/account" class="li" >
								<view >{{hasLogin&&userInfo?userInfo.user_money:0}}</view>余额
							</view>
							<view @tap.stop="clickMenu" class="li" data-url="/pages/user/points_list/points_list">
								<view>{{hasLogin&&userInfo?userInfo.pay_points:0}}</view>
								积分
							</view>
							<view @tap.stop="clickMenu" class="li" data-type="login" data-url="/pages/user/coupon/coupon">
								<view>{{coupon_count?coupon_count:0}}</view>
								优惠券
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="head_r2">
				<view @tap.stop="clickMenu" class="h3 des_flex_4" data-url="/pages/user/order_list/order_list">
					我的订单
					<view class="r_ys des_flex_3">
						全部订单
						<image :src="imgUrl+'user/xr_3.png'" role="img"></image>
						
					</view>
				</view>
				<view class="ul des_flex_4">
					<navigator @tap.stop="clickMenu" class="li" data-url="/pages/user/order_list/order_list?type=1" role="navigation">
						<view class="img" >
							<image :src="imgUrl+'user/q1.png'" role="img"></image>
							<view class="nuberi_2" v-if="hasLogin&&statistic.wait_pay_count!=0">{{statistic.wait_pay_count}} </view>
						</view>
						<view>待付款</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="li" data-url="/pages/user/order_list/order_list?type=2" role="navigation">
						<view class="img" >
							<image :src="imgUrl+'user/ka.png'" role="img"></image>
							<view class="nuberi_2" v-if="hasLogin&&statistic.wait_send_count!=0">{{statistic.wait_send_count}}</view>
						</view>
						<view>待发货</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="li" data-url="/pages/user/order_list/order_list?type=3" role="navigation">
						<view class="img">
							<image :src="imgUrl+'user/q2.png'" role="img"></image>
							<view class="nuberi_2"  v-if="hasLogin&&statistic.wait_receive_count!=0">{{statistic.wait_receive_count}}</view>
						</view>
						<view>待收货</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="li" data-type="login" data-url="/pages/user/comment/comment?status=0" role="navigation">
						<view class="img" >
							<image :src="imgUrl+'user/q3.png'" role="img"></image>
							<view class="nuberi_2" v-if="hasLogin&&statistic.wait_comment_count!=0">{{statistic.wait_comment_count}}</view>
						</view>
						<view>待评价</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="li" data-url="/pages/user/return_goods_list/return_goods_list" role="navigation">
						<view class="img" >
							<image :src="imgUrl+'user/q4.png'" role="img"></image>
							<view class="nuberi_2" v-if="hasLogin&&statistic.return_goods_count!=0">{{statistic.return_goods_count}}</view>
						</view>
						<view>退换/售后</view>
					</navigator>
				</view>
			</view>
			<view class="head_r2">
				<view class="h3 des_flex_4">必备功能</view>
				<view class="bibei_1 clearfix">
					<navigator @tap.stop="distributSee" class="a des_flex_3" role="navigation">
						<view class="img">
							<image :src="imgUrl+'user/ss_17.png'" role="img"></image>
							新手必看
						</view>
					</navigator>
					<!-- 授权管理h5和app 没有 -->
					<!-- #ifndef H5 || APP-PLUS -->
					<navigator @tap.stop="authorization" class="a des_flex_3" role="navigation">
						<view class="img">
							<image :src="imgUrl+'user/ss_18.png'" role="img"> </image> 授权管理 
						</view>
					</navigator>
					<!-- #endif -->
					<block v-for="(item,index) in menu" :key="index">
						<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" :data-url="item.menu_url" role="navigation" v-if="item.is_show&&item.menu_id!=1">
							<view class="img">
								<image :src="item.menu_img" role="img"></image>
								{{item.menu_name}}
							</view>
						</navigator>
					</block>
					<!-- <navigator @tap.stop="clickMenu"class="a des_flex_3" data-type="login" data-url="/pages/user/comment/comment?status=1" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_1.png" role="img"></image>
							我的评价
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3"  data-url="/pages/team/team_order/team_order" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_3.png" role="img"></image>
							拼团订单
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-url="/pages/distribut/poster/poster" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_4.png" role="img"></image>
							我的海报
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu"class="a des_flex_3"data-type="login"  data-url="/pages/distribut/index/index" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_5.png" role="img"></image>
							我的分销
						</view>
					</navigator>
					<navigator v-if="emporarily" @tap.stop="clickMenu" class="a des_flex_3" data-url="/pages/virtual/virtual_list/virtual_list" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_6.png" role="img"></image>
							虚拟订单
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-url="/pages/goods/integralMall/integralMall" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_12.png" role="img"></image>
							积分商城
						</view>
					</navigator>
					<navigator  class="a des_flex_3" url="/pages/active/coupon_list/coupon_list"  role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_8.png" role="img"></image>
							领券中心
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-url="/pages/user/visit_log/visit_log" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_9.png" role="img"></image>
							浏览记录
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-url="/pages/user/address_list/address_list" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_10.png" role="img"></image>
							地址管理
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-store="store" data-url="/pages/newjoin/join1/join1" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_11.png" role="img"></image>
							我要开店
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-url="/pages/index/index/index" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/kd_1.png" role="img"></image>
							砍价订单
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-url="/pages/user/sign_in/sign_in" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/qd_1.png" role="img"></image>
							我的签到
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" data-url="/pages/index/webview/webview?doc_code=13" class="a des_flex_3" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_17.png" role="img"></image>
							使用帮助
						</view>
					</navigator> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/api/config.js";
	import appHead from "@/components/app-head/app-head";
	import common from "@/common/common.js";
	import {getUserCouponList,getOrderStatistic,getUserInfo,getMessage,getMenu} from "@/api/api.js";
	import { mapState,mapMutations,mapActions} from 'vuex';
	const globalData=getApp().globalData//从app.vue获取用户信息
	export default {
		data() {
			return {
				hostUrl:config.host,//路径前缀
				imgUrl:config.imgUrl,
				userInfo:null,
				notDo:false,//暂时不做
				defaultImg:config.imgUrl+'common/user68.jpg',
				bgImg:config.imgUrl+'user/t_1.png',
				nickName:"",//用户名
				imageError:false,//图片404
				avatarUrl:"",//头像
				coupon_count:"",//可用优惠券数量
				emporarily:false,//暂时没有
				statistic:"",//订单统计概况
				newCount:"",//未读消息总数
				bg:"#ff3b3b",
				menuList:[//menuee
					{img:config.imgUrl+'',url:'/pages/user/order_list/order_list',type:'订单列表'},
					{img:config.imgUrl+'user/w2.png',url:'/pages/user/coupon/coupon',type:'优惠券'},
					{img:config.imgUrl+'user/ss_4.png',url:'/pages/distribut/poster/poster',type:'海报',isShow:false,},
					{img:config.imgUrl+'user/ss_5.png',url:'/pages/distribut/index/index',type:'我的分销'},
					{img:config.imgUrl+'user/w5.png',url:'/pages/distribut/index/index',type:'虚拟订单',isShow:false,},
					{img:config.imgUrl+'user/ss_3.png',url:'/pages/team/team_order/team_order',type:'拼团订单'},
					{img:config.imgUrl+'user/w7.png',url:'/pages/team/team_order/team_order',type:'预约订单',isShow:false,},
					{img:config.imgUrl+'user/w8.png',url:'/pages/team/team_order/team_order',type:'自提订单',isShow:false,},
					{img:config.imgUrl+'user/ss_1.png',url:'/pages/user/comment/comment?status=1',type:'我的评价'},
					{img:config.imgUrl+'user/ss_12.png',url:'/pages/goods/integralMall/integralMall',type:'积分兑换'},
					{img:config.imgUrl+'user/qd_1.png',url:'/pages/user/sign_in/sign_in',type:'我的签到'},
					{img:config.imgUrl+'user/w12.png',url:'/pages/active/coupon_list/coupon_list',type:'领券中心'},
					{img:config.imgUrl+'user/w13.png',url:'/pages/user/collect_list/collect_list',type:'我的收藏'},
					{img:config.imgUrl+'user/w14.png',url:'/pages/user/visit_log/visit_log',type:'我的足迹'},
					{img:config.imgUrl+'user/w15.png',url:'/pages/user/message_notice/message_notice',type:'我的消息'},
					{img:config.imgUrl+'user/ss_10.png',url:'/pages/user/address_list/address_list',type:'地址管理'},
					{img:config.imgUrl+'user/w18.png',url:'/pages/user/address_list/address_list',type:'砍价订单',isShow:false,},
					{img:config.imgUrl+'user/w19.png',url:'/pages/index/webview/webview?doc_code=13',type:'使用帮助'},
					{img:config.imgUrl+'user/w20.png',url:'/pages/index/webview/webview?doc_code=13',type:'我的购物卡',isShow:false,},
				],
				menu:"",//列表
			};
		},
		components:{
			appHead
		},
		computed: mapState(['hasLogin','user','token','navHeight']),
		onLoad(){
			
			this.getMenu()
		},
		onShow(){
			let that=this;	
			if(that.hasLogin){
				that.getUser()
				that.userInfo=that.user
				let params={
					type: 0,//可用优惠劵
					size: 12,
				}
				that.getUserCouponList(params)
				that.getOrderStatistic()
				/*消息总未读数*/
				let newData={ /*category 0通知消息,1活动消息,2物流,3私信*/
					category:"0,1,2"
				}
				that.getMessage(newData)
			}	
		},
		methods:{
			 ...mapActions(['getUser']),
			/*用户未读信息总数*/ 
			getMessage(params){
				getMessage(params).then(res=>{
					this.newCount=res;
					console.log(res)
				})
			},
			getMenu(){
				getMenu().then(res=>{
					if(res.length>0){
						this.menuList.forEach((item,index)=>{
							if(item.type==res[index].menu_name){
								// console.log(item)
								if(item.isShow==false){
									console.log(item.isShow)
									res[index].is_show=	item.isShow
								}
								res[index].menu_img=item.img;
								res[index].menu_url=item.url;
								res[index].menu_type=item.type;
							}
						})
					}
					this.menu=res;
					console.log(this.menu)
				})
			},
			/*用户可用优惠券数*/ 
			getUserCouponList(params){
				getUserCouponList(params).then(res=>{
					console.log(res)
					if(res){
						this.coupon_count=res.records.length;
						
					}
				})
			},
			/*订单统计概况*/ 
			getOrderStatistic(){
				getOrderStatistic().then(res=>{
					this.statistic=res;
				})
			},
			/*授权管理 不会再h5和app中出现*/ 
			authorization(){
				/*打开授权*/
				// #ifndef H5 || APP-PLUS
				uni.openSetting({
				  success(res) {
				    console.log(res.authSetting)
					if(res.authSetting["scope.userInfo"]==true){
						uni.getSetting({
						   success(res) {
						      console.log(res.authSetting)
						   }
						})
					}else{
						uni.showModal({
							title: '用户未授权',
							content: '如需正常使用小程序，请点击授权按钮。',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定')
								}
							}
						})
					}
				  }
				});
			// #endif
			},
			/*新手必看*/ 
			distributSee(){
				uni.navigateTo({ 
					url:`/pages/index/webview/webview?type=system&doc_code=create_circle`
				})
			},
			
			clickMenu(e){//跳转方法
				console.log(e)
				let url=e.currentTarget.dataset.url;
				let login=e.currentTarget.dataset.type;
				let store=e.currentTarget.dataset.store;
				if(login){
					// this.params.prom_type=6;
					if(this.hasLogin){
						uni.navigateTo({
							url:url
						})
					}else{
						// console.log("跳转");
						
						common.islogin()
					}
					
				}else{
					uni.navigateTo({
						url:url
					})
				}
				
			},
			/*图片404使用默认图片*/
			onImageError(){
				this.imageError=true;
			}
		}
	}
</script>

<style lang="scss">
	page{
	  background: #f5f5f5;
	}
	/* #ifdef MP */
	.head-user{
		position: fixed;
		top:0;
		z-index:100;
		
		width: 100%;
		.text{
			color: #fff;
			font-size: 30rpx;
			position: absolute;
			bottom: 20rpx;
			left:20rpx;
		}
	}
	/* #endif */
	.clearfix:before,
	.clearfix:after{
	  content:" ";
	  display:table;
	  line-height: 0;
	}
	.clearfix:after{
	  clear:both;
	}
	.des_flex_1{
	  display: flex;
	  justify-content: space-between;
	}
	.des_flex_2{
	  display: flex;
	  align-items: center;
	}
	.des_flex_3{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.des_flex_4{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.over_hide{
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box !important;
	  -webkit-line-clamp: 1;
	  -webkit-box-orient: vertical;
	  height: 36rpx;
	}
	/* 局部 */
	.container .head_re{
	  position: relative;
	}
	.container .top_1{
	  position: relative;
	  margin-bottom: 80rpx;
	}
	.container .top_1 .bg_1{
	  width: 750rpx;
	  height: 340rpx;
	}
	.container .top_1 .r{
	  position: absolute;
	  top: 40rpx;
	  right: 20rpx;
	  text-align: right;
	}
	.sign_in_1{
	  position: absolute;
	  top: 0;
	  right: -20rpx;
	  height: 120rpx;
	  z-index: 99;
	}
	.sign_in{
	  width: 190rpx;
	  height: 54rpx;
	  font-size: 22rpx;
	  color: #fff;
	  display: flex;
	  align-items: center;
	  border-radius: 27rpx 0 0 27rpx;
	  background:linear-gradient(90deg,rgba(255,204,0,1) 0%,rgba(255,158,61,1) 100%);
	  box-shadow:0px 4rpx 10rpx 0px rgba(255,106,76,0.4);
	}
	.sign_in image{
	  width: 24rpx;
	  height: 24rpx;
	  margin-left: 25rpx;
	  margin-right: 8rpx; 
	}
	.container .top_1 .r .l_1{
	  width: 48rpx;
	  height: 48rpx;
	  display: inline-block;
	  margin-left: 30rpx;
	  position: relative;
	}
	.container .top_1 .r .l_1 image{
	  width: 48rpx;
	  height: 48rpx;
	}
	.container .top_2{
	  width: 710rpx;
	  height: 160rpx;
	  background: #fff;
	  border-radius: 10rpx;
	  position: absolute;
	  top: 248rpx;
	  left: 20rpx;
	}
	.container .top_3{
	  top: 88rpx;
	  background: none;
	}
	.container .t_top_1 .l_1{
	  padding: 0 40rpx;
	  height: auto;
	  /* position: absolute;
	  top: -70rpx;
	  left: 0;
	  right: 0; */
	  box-sizing: border-box;
	  position: relative;
	}
	.container .t_top_1 .tx{
	  position: relative;
	  width: 120rpx;
	  float: left;
	}
	.container .t_top_1 .b{
	  width: 120rpx;
	  height: 120rpx;
	  border:6rpx solid rgba(255,255,255,1);
	  box-shadow:0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.1);
	  box-sizing: border-box;
	  border-radius: 50%;
	  position: relative;
	  overflow: hidden;
	  background: #f5f5f5;
	} 
	.container .t_top_1 .tx image{
	  width: 100%;
	  height: 100%;
	  /* object-fit: cover; */
	}
	.container .t_top_1 .tx_yan{
	    float: left;
	    height: 120rpx;
	    width: 350rpx;
	    margin-left: 30rpx;
	}
	.container .t_top_1 .b_j{
	  width: auto;
	  color: #fff;
	  height: 36rpx;
	  border-radius: 16rpx;
	  font-size: 20rpx;
	  text-align: center;
	  line-height: 36rpx;
	  padding: 0 12rpx;
	  /* background:linear-gradient(90deg,rgba(255,106,76,1) 0%,rgba(255,153,51,1) 100%); */
	  background: rgba(0, 0, 0, 0.1);
	  box-shadow:0px 4rpx 10rpx 0px rgba(255,106,76,0.4);
	  margin-top: 15rpx;
	}
	.container .t_top_1 .bt{
	  font-size: 30rpx;
	  color: #fff;
	  height: auto;
	  font-weight: bold;
	}
	.container .t_top_1 .qind_1{
	  float: right;
	  margin-top: 106rpx;
	  width: 100rpx;
	  height: 54rpx;
	  background:linear-gradient(90deg,rgba(255,106,76,1) 0%,rgba(255,153,51,1) 100%);
	  box-shadow:0px 4rpx 10rpx 0px rgba(255,106,76,0.4);
	  border-radius:27rpx 27rpx 27rpx 0px;
	  font-size: 22rpx;
	  color: #FEFEFE;
	  text-align: center;
	  line-height: 54rpx;
	}
	.container .t_top_1 .qind_1 image{
	  width: 24rpx;
	  height: 24rpx;
	  display: inline-block;
	  position: relative;
	  top: 5rpx;
	}
	.container .t_top_1 .l_2{
	  /* margin-top: 140rpx; */
	  height: 160rpx
	}
	.container .t_top_1 .l_2 .li{
	  font-size: 24rpx;
	  color: #333;
	  width: 33.333%;
	  text-align: center;
	  position: relative;
	}
	.container .t_top_1 .l_2 .li::before{
	  content: '';
	  position: absolute;
	  top: 20rpx;
	  right: 0;
	  width:1rpx;
	  height:40rpx;
	  background:#f3f3f3;
	}
	.container .t_top_1 .l_2 .li:last-child::before{
	  background: #fff;
	}
	.container .t_top_1 .l_2 .li view{
	  color: #ff3b3b;
	  font-size: 30rpx;
	  margin-bottom: 10rpx;
	  font-weight: bold;
	}
	.container .head_r2{
	  background: #fff;
	  margin: 0 20rpx 20rpx 20rpx;
	  position: relative;
	  border-radius: 10rpx;
	}
	.container .head_r2:last-child{
	  margin-bottom: 1rpx;
	}
	.container .head_r2 .h3{
	  font-size: 30rpx;
	  color: #333;
	  height: 80rpx;
	  padding-right: 20rpx;
	  position: relative;
	  padding-left: 20rpx;
	}
	.container .head_r2 .h3::before{
	  content: '';
	  position: absolute;
	  top: 26rpx;
	  left: 0;
	  width:6rpx;
	  height:30rpx;
	  background:rgba(255,76,76,1);
	}
	.container .head_r2 .r_ys{
	  font-size: 24rpx;
	  color: #999;
	}
	.container .head_r2 image{
	  width: 32rpx;
	  height: 32rpx;
	  display: block;
	  position: relative;
	}
	.container .head_r2 .ul{
	  /* margin: 0 20rpx; */
	  height: 180rpx;
	  box-sizing: border-box;
	  font-size: 24rpx;
	  color: #333;
	  border-top: 1rpx solid #f3f3f3;
	}
	.container .des_flex_3 image{
	  margin-left: 10rpx;
	}
	.container .head_r2 .ul .li{
	  text-align: center;
	  width: 20%;
	  position: relative;
	  height: 150rpx;
	  padding-top: 30rpx;
	  box-sizing:content-box; 
	}
	.container .head_r2 .ul .li .img{
	  position: relative;
	  width: 56rpx;
	  height: 56rpx;
	  margin: 0 auto;
	  margin-bottom: 20rpx;
	}
	.container .head_r2 .ul .li image{
	  width: 100%;
	  height: 100%;
	  display: block;
	}
	.container .head_r2 .bibei_1{
	  /* margin: 0 20rpx; */
	  border-top: 1rpx solid #f3f3f3;
	}
	.container .head_r2 .bibei_1 .a{
	  float: left;
	  width: 25%;
	  height: 160rpx;
	  font-size: 24rpx;
	  color: #666;
	  text-align: center;
	}
	.container .head_r2 .bibei_1 .a image{
	  display: block;
	  width: 72rpx;
	  height: 72rpx;
	  margin: 0 auto;
	  margin-bottom: 10rpx;
	}
	.nuberi_1{
	  padding: 0 12rpx;
	  height: 36rpx;
	  line-height: 36rpx;
	  color: #ff3b3b;
	  font-size: 24rpx;
	  position: absolute;
	  top: -11rpx;
	  right: -14rpx;
	  background: #fff;
	  border-radius: 36rpx;
	}
	.nuberi_2{
	  height: 36rpx;
	  min-width: 36rpx;
	  box-sizing: border-box;
	  padding: 0 5rpx;
	  line-height: 36rpx;
	  color: #fff;
	  font-size: 24rpx;
	  position: absolute;
	  top: -11rpx;
	  right: -14rpx;
	  background: #ff3b3b;
	  border-radius: 18rpx;
	  box-shadow:0px 4px 10px 0px rgba(255,76,76,0.4);
	}
	.nuberi_3{
	  padding: 0 12rpx;
	  height: 36rpx;
	  line-height: 36rpx;
	  color: #fff;
	  font-size: 24rpx;
	  position: absolute;
	  top: 22rpx;
	  right: 76rpx;
	  background: #ff3b3b;
	  border-radius: 100%;
	  box-shadow:0px 4px 10px 0px rgba(255,76,76,0.4);
	}
</style>
